<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/orderList'">
            <div class="vs-search-box">
                <el-form ref="form" v-search-box-enter :inline="true" :model="paging" label-width="120px">
                    <el-form-item label="姓名：">
                        <el-input class="vs-w-250" v-model="paging.realname" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：">
                        <el-input class="vs-w-250" v-model="paging.phone" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="订单编号：">
                        <el-input class="vs-w-250" v-model="paging.out_trade_no" clearable></el-input>
                    </el-form-item>
                    <el-form-item label="订单时间：">
                        <el-date-picker v-model="paging.bill_time_start" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd" start-placeholder="开始时间" end-placeholder="结束时间" class="vs-w-250"> </el-date-picker>
                    </el-form-item>
                    <el-form-item label="订单状态：">
                        <el-select class="vs-w-250" clearable v-model="paging.status" placeholder="请选择">
                            <el-option label="待付尾款" value="1"> </el-option>
                            <!-- <el-option label="待消费" value="2"> </el-option> -->
                            <el-option label="已完成" value="3"> </el-option>
                            <el-option label="部分退款" value="4"> </el-option>
                            <el-option label="已退款" value="5"> </el-option>
                            <el-option label="待完成" value="6"> </el-option>
                            <el-option label="已作废" value="0"> </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="" class="vs-right-btns">
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        <el-button @click="reset" plain>重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <div class="vs-table-box">
                <div class="operation-box clear-float">
                    <el-button @click="exportFn" v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary">导出 </el-button>
                </div>
                <el-table v-loading="loading" :data="tableData" header-row-class-name="has-gutter-table" height="689px" style="width: 100%">
                    <el-table-column width="55px" type="selection"></el-table-column>
                    <el-table-column width="70px" label="序号" prop="id" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 + (paging.page - 1) * paging.limit }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="out_trade_no" label="订单编号" min-width="130" align="center"> </el-table-column>
                    <el-table-column prop="user.vip_no" label="会员卡号" min-width="100" show-overflow-tooltip align="center">
                        <template slot-scope="{ row }">
                            <span v-if="row.user && row.user.vip_no">{{ row.user.vip_no }}</span>
                            <span v-else>{{ row.orders_vip_no }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user.realname" label="姓名" min-width="100" show-overflow-tooltip align="center">
                        <template slot-scope="{ row }">
                            <span v-if="row.user && row.user.realname">{{ row.user.realname }}</span>
                            <span v-else>{{ row.orders_realanme }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="user.phone" label="手机号" min-width="110" align="center">
                        <!-- <template slot-scope="scope">
                        <div v-if="scope.row.phone">
                            {{scope.row.phone | rtPhone}}
                        </div>
                    </template> -->
                    </el-table-column>
                    <el-table-column prop="goods.0.goods_name" label="名称" min-width="100" show-overflow-tooltip align="center">
                        <template slot-scope="scope">
                            <span v-if="scope.row.goods.length">
                                {{ utils.productNameFiltering(scope.row.goods[0]) }}
                            </span>
                            <div v-else-if="scope.row.project.length">
                                {{ scope.row.project[0].project_name }}
                            </div>
                            <span v-else>{{ scope.row.orders_title }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="orders_payable" label="订单金额" min-width="100" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.orders_payable || '0.00' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="paid_amount" label="支付金额" min-width="100" align="center"> </el-table-column>
                    <el-table-column prop="" label="服务员工" min-width="100" show-overflow-tooltip align="center">
                        <template slot-scope="scope" v-if="scope.row.commission.length">
                            <div v-if="scope.row.commission.length">
                                <span style="margin-right: 10px" v-for="(ele, index) in scope.row.commission" :key="index">{{ ele.staff && ele.staff.name }}</span>
                            </div>
                            <span v-else>{{ scope.row.orders_service_name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作人" align="center" min-width="110" show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span>{{ scope.row.staff && scope.row.staff.name }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status_text" label="订单状态" align="center"> </el-table-column>
                    <el-table-column prop="bill_date" label="订单时间" min-width="120" align="center">
                        <template slot-scope="{ row }">
                            {{ row.advance_time || row.pay_time }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" width="150" label="操作" align="center">
                        <template slot-scope="scope">
                            <span @click="setRow(1, scope.row)" class="tab-table-text">查看详情</span>
                            <span v-if="scope.row.status == 6" @click="setRow(3, scope.row)" class="tab-lv-text">完成 </span>
                            <span v-if="scope.row.ticket && scope.row.ticket.id" @click="setRow(5, scope.row)" class="tab-table-text">维修</span>
                            <span @click="setRow(2, scope.row)" v-if="isDate(scope.row)" class="tab-red-text">作废</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total,sizes,prev, pager, next, jumper" :total="paging.total" :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
            <el-dialog :visible.sync="dialogVisible2" width="1250px">
                <div slot="title" class="dialog_tit">选择要货单</div>
                <div>
                    <el-table :data="demandList" v-loading="loading2" @cell-click="handleDemand">
                        <el-table-column label="" width="50">
                            <template slot-scope="scope">
                                <span :class="demandIndex == scope.row.id ? 'icon-xuanzhong' : 'icon-weixuanzhong'" class="iconfont"></span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="id" label="序号" min-width="50" align="center"></el-table-column>
                        <el-table-column prop="store.title" label="要货门店" align="center"></el-table-column>
                        <el-table-column prop="two_type" label="要货类型" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.two_type == 1 ? '定制毛坯' : '定制成品' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="number" label="要货单号" min-width="100" show-overflow-tooltip align="center"></el-table-column>
                        <el-table-column prop="realname" label="姓名" align="center" show-overflow-tooltip> </el-table-column>
                        <el-table-column prop="gender" label="性别" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.gender | typeGender }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="phone" label="手机号" width="110" align="center"></el-table-column>
                        <el-table-column prop="price" v-if="utils.getIsShopowner()" label="要货金额" align="center"> </el-table-column>
                        <!-- <el-table-column prop="date" label="最晚到店时间" sortable align="center"></el-table-column> -->
                        <el-table-column prop="create_time" label="申请时间" width="160" align="center"></el-table-column>
                        <el-table-column prop="special_order_status" label="订单状态" align="center">
                            <template slot-scope="scope">
                                {{ scope.row.special_order_status | specialOrderStatus }}
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="vs-paging-box">
                        <el-pagination background layout="prev, pager, next" :current-page.sync="paging2.page" :total="paging2.total" :page-size="paging2.limit" @current-change="handleCurrentChange2" prev-text="上一页" next-text="下一页"> </el-pagination>
                    </div>
                </div>
                <div slot="footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="setRow(4, order)">确 定</el-button>
                </div>
            </el-dialog>
            <vs-after-sales v-model="isRepair" :id="repairId" @success="repairSuccess" :type="2"></vs-after-sales>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import VsAfterSales from '@/components/VsAfterSales.vue';
    export default {
        components: {
            VsAfterSales,
        },
        filters: {
            rtPhone(val) {
                if (val && val.length == 11) {
                    let val2 = val.toString();
                    let num1 = val2.substring(0, 3);
                    let num2 = val2.substring(7, 11);
                    return `${num1}****${num2}`;
                }

                return val;
            },
        },
        data() {
            return {
                isRepair: false,
                repairId: '',
                recordList: [],
                loading: false,
                loading2: false,
                isBtn: false,
                isInfo: false,
                dialogVisible2: false,
                dialogVisible: false,
                order: {},
                demandList: [],
                demandIndex: '',
                paging: {
                    bill_time_start: '',
                    realname: '', //姓名
                    phone: '', //	手机号
                    out_trade_no: '', //订单编号
                    create_time: '', //开始时间
                    end_time: '', //结束时间
                    status: '', //状态 1: 待结尾款 2: 待消费 3: 已完成 4: 部分退款 5: 已退款
                    is_all: '',
                    page: 1,
                    total: 0,
                    limit: 100,
                },
                paging2: {
                    keys: '',
                    date: '',
                    user_id: '',
                    start_time: '',
                    stop_time: '',
                    store_id: '',
                    status: '',
                    type: '',
                    id: '',
                    page: 1,
                    total: 0,
                    limit: 10,
                },
                form: {
                    date: '',
                },
                tableData: [],
            };
        },
        created() {
            if (this.$route.path == '/orderList') {
                this.getOrders();
            }
        },
        methods: {
            repairSuccess() {
                this.getOrders();
            },
            handleDemand(e) {
                this.demandIndex = e.id;
            },
            handleCurrentChange2(val) {
                this.paging.page = val;
                this.specialLists();
            },
            async specialLists() {
                this.loading2 = true;
                let { code, data } = await this.$Http.specialLists(this.paging2);
                this.loading2 = false;
                if (code) {
                    this.demandList = data.data;
                    this.paging2.total = data.total;
                }
            },
            isDate(row) {
                if (!row.create_time) return false;
                let date = new Date(row.create_time);
                let currentTime = new Date();
                return currentTime.getMonth() === date.getMonth() && (row.status == 1 || row.status == 2 || row.status == 3 || row.status == 6);
            },
            // 导出
            async exportFn() {
                let obj = Object.assign({}, this.paging);
                if (obj.bill_time_start?.length) {
                    obj.create_time = obj.bill_time_start[0];
                    obj.end_time = obj.bill_time_start[1];
                }
                let url = this.utils.data.baseURL + 'store/orders/exportOrders';
                this.utils.urlToBlob(url, '消费订单', obj);
            },
            async getOrders() {
                let obj = Object.assign({}, this.paging);
                if (obj.bill_time_start?.length) {
                    obj.create_time = obj.bill_time_start[0];
                    obj.end_time = obj.bill_time_start[1];
                }
                this.loading = true;
                let { code, data } = await this.$Http.getOrders(obj);
                this.loading = false;
                if (code) {
                    data.data.forEach((v) => {
                        v.isRepair = v.project.length == 0 && v.goods?.[0]?.goods?.type != 4;
                        if (typeof v.ticket == 'string') {
                            v.ticket = JSON.parse(v.ticket);
                        }
                    });
                    this.tableData = data.data;
                    this.paging.total = data.total;
                }
                // console.log(this.classList);
            },
            async setRow(type, row) {
                if (type == 1) {
                    this.utils.goUrl('/orderInfo?id=' + row.id);
                } else if (type == 2) {
                    this.$msgbox({
                        title: '提示',
                        message: '确定要作废该消费订单吗?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: async (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                let { code, data } = await this.$Http.cancelOrder({ id: row.id });
                                if (code) {
                                    this.$message.success('作废成功!');
                                    this.handleCurrentChange(1);
                                }
                                done();
                                instance.confirmButtonLoading = false;
                            } else {
                                done();
                            }
                        },
                    })
                        .then((action) => {})
                        .catch(() => {});
                } else if (type == 3 || type == 4) {
                    let ticket_id;
                    //11/24 移除要货单选择
                    // if (type == 4) {
                    //     if (!this.demandIndex) return this.$message.error('请选择要货单');
                    //     ticket_id = this.demandIndex;
                    // } else if (row?.goods?.[0]?.goods?.roughcast_type == 2) {
                    //     //特殊订单选要货单
                    //     this.dialogVisible2 = true;
                    //     this.order = row;
                    //     this.paging2.user_id = row.user_id;
                    //     this.handleCurrentChange2(1);
                    //     this.demandIndex = '';
                    //     return;
                    // }

                    console.log('订单已完成', ticket_id);
                    this.$msgbox({
                        title: '提示',
                        message: '确定该消费订单已完成了吗?',
                        type: 'warning',
                        showCancelButton: true,
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        beforeClose: async (action, instance, done) => {
                            if (action === 'confirm') {
                                instance.confirmButtonLoading = true;
                                instance.confirmButtonText = '执行中...';
                                let { code, data } = await this.$Http.queryOrders({ orders_id: row.id, ticket_id });
                                if (code) {
                                    this.$message.success('确认完成!');
                                    this.handleCurrentChange(1);
                                    this.dialogVisible2 = false;
                                }
                                done();
                                instance.confirmButtonLoading = false;
                            } else {
                                done();
                            }
                        },
                    })
                        .then((action) => {})
                        .catch(() => {});
                } else if (type == 5) {
                    this.isRepair = true;
                    this.repairId = row.ticket.id;
                }
            },
            handleClose(dom) {
                this.$refs['ruleForm'].resetFields();
                this.dialogVisible = false;
                dom && dom();
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.getOrders();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.getOrders();
            },
        },
    };
</script>

<style lang="scss" scoped>
    .image-thumbnail {
        width: 130px;
        height: 130px;
    }
</style>
